<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>circles</title>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,700,600|Open+Sans+Condensed:300,700' rel='stylesheet' type='text/css'>
<link type="text/css" href="https://raw.github.com/commons/common.css/master/build/common.css" rel="stylesheet">
<link type="text/css" href="main.less" media="screen" rel="stylesheet/less">
<script src="http://cdnjs.cloudflare.com/ajax/libs/less.js/1.3.1/less.min.js" type="text/javascript"></script>
</head>
<body>
<h1>circle</h1>
<p class="usage">Default mixin syntax: <pre class="usage">.circle(@radius: 100px, @color: black, @border:none)</pre>

<div class="circle1">
<pre>
.circle1 {
	.circle(100px, papayawhip);
}
</pre>
</div>

<div class="circle2">
<div>
<p><pre>
.circle2 {
	.circle(260px, red, 1px solid #333);  
	float:left;  
	color:#fff;  
	display:table;  
	div {  
		padding:0 40px;  
		display:table-cell;   
		vertical-align:middle;  
	}
}
</pre></p></div>
</div>
</body>
</html>